<template>
  <el-card>
    <template #header>
      <div class="clearfix">
        <span>隐患管理</span>
        <el-button @click="router.push('/home/system/user/add')" style="float: right; padding: 3px 0" type="text">添加</el-button>
      </div>
    </template>
    <el-table :data="hazardsList" border style="width: 100%">
      <el-table-column prop="chargingStationName" label="充电站点名称"></el-table-column>
      <el-table-column prop="chargerNumber" label="充电枪编号"></el-table-column>
      <el-table-column prop="address" label="地址位置"></el-table-column>
      <el-table-column prop="hazardType" label="隐患类型" ></el-table-column>
      <el-table-column prop="priorityLevel" label="隐患优先级"></el-table-column>
      <el-table-column prop="hazardContent" label="隐患内容" ></el-table-column>
      <el-table-column prop="status" label="状态"></el-table-column>
      <el-table-column prop="registrationTime" label="登记时间"></el-table-column>
    </el-table>
  </el-card>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { fetchHazardsList } from "../../../../api/HazardsApi.ts";
import router from "../../../../router";

const hazardsList = ref([]);

const getHazardsList = async () => {
  const res = await fetchHazardsList();
  if (res.code === 200) {
    hazardsList.value = res.data
  }
};


getHazardsList();

</script>

<style scoped>
.el-card {
  margin-top: 20px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 0 #ffffff;
  outline: 0;
}
</style>
